<template>
  <div class="default-main ba-table-box">
    <!-- 表格顶部菜单 -->
    <TableHeader
      :buttons="['refresh', 'comSearch', 'columnDisplay']"
      :quick-search-placeholder="placeholder"
      @action="baTable.onTableHeaderAction"
    />
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table ref="tableRef" @action="baTable.onTableAction" />
    <!-- 表单 -->
    <!-- <PopupForm v-if="baTable.form.operate ? true : false" /> -->
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  provide,
  onMounted,
  markRaw,
  reactive,
  onBeforeUnmount,
} from "vue";
import baTableClass from "@/utils/baTable";
import { baTableApi, operatorShowOff, getDictData } from "@/utils/common"; // 导入表格api方法生成器
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import { EandORecord } from "@/api/backend/index";
import { useRoute, useRouter } from "vue-router";
import useCurrentInstance from "@/utils/useCurrentInstance";
import type { TableRow, TableColumn } from "@/utils/baTable"; //表格列行类型
import { useNavTabs } from "@/store/navTabs";
import PopupForm from "./popupForm.vue";
import { useDictionary } from "@/store/backend/tool/dictionary";
import Tag from "./components/tag.vue";
import TagSearch from "@/components/tagSearch/index.vue";
import { useStoreWarehouseLocation } from "@/store/backend/StoreroomM/Location";

const placeholder = ref<string>("模糊搜索");
const tableRef = ref();
const route = useRoute();
const router = useRouter();
const navTabs = useNavTabs();
const dictionary = useDictionary();
const Location = useStoreWarehouseLocation();

//全局事件总线
const { proxy } = useCurrentInstance();
const state: {} = reactive({});

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};
// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + EandORecord)
      ? (navTabs as any).pageSizeMap.get(route.path + EandORecord)
      : 10;
  }
  return 10;
};

const baTable = new baTableClass(
  new baTableApi(EandORecord), //this.api = api部门管理
  {
    expandAll: true,
    pk: "materialRecordId",
    column: [
      { type: "selection", align: "center", operator: false },
      {
        show: filedShowOff("materialName"),
        label: "物料名称",
        prop: "materialName",
        align: "left",
        operatorPlaceholder: "模糊搜索",
      },
      {
        show: filedShowOff("materialCode"),
        label: "物料编号",
        prop: "materialCode",
        align: "left",
        operatorPlaceholder: "模糊搜索",
      },
      {
        show: filedShowOff("materialType"),
        label: "物料型号",
        prop: "materialType",
        align: "left",
        operatorPlaceholder: "模糊搜索",
      },
      {
        show: filedShowOff("quantity"),
        label: "数量",
        prop: "quantity",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("unit"),
        label: "单位",
        prop: "unit",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("materialRecordType"),
        label: "出入库类型",
        prop: "materialRecordType",
        render: "customRender",
        customRender: markRaw(Tag),
        comSearchRender: "customRender",
        comSearchCustomRender: markRaw(TagSearch),
      },
      {
        show: filedShowOff("purpose"),
        label: "用途",
        prop: "purpose",
        render: "customRender",
        customRender: markRaw(Tag),
        comSearchRender: "customRender",
        comSearchCustomRender: markRaw(TagSearch),
      },
      {
        show: filedShowOff("operatorName"),
        label: "操作者姓名",
        prop: "operatorName",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("operatorTime"),
        label: "操作时间",
        prop: "operatorTime",
        align: "center",
        operator: false,
      },

      {
        show: operatorShowOff([
          route.path + "/edit",
          route.path + "/add",
          route.path + "/remove",
        ]),
        label: "操作",
        align: "center",
        operator: false,
        render: "buttons",
        fixed: "right",
        width: "150",
        buttons: [
          {
            render: "tipButton",
            name: "info", //绑定edit
            title: "详情",
            text: "",
            type: "primary",
            icon: "iconfont icon-chaxunyujisuan",
            class: "table-row-edit",
            disabledTip: false,
            display: (row: TableRow, field: TableColumn) => {
              if (row.state === 2) {
                //未激活状态无法查看实时数据
                return false;
              }
              return true;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
        ],
      },
    ],
    filter: {
      pageSize: pageSizeKeep(),
    },
    extend: {
      maxHeight: 580,
    },
  },
  {
    defaultItems: { parentId: 0, parentCode: "0" },
  },
  {}
);

//获取仓库空间/物料类型字典
const getMenuStatus = () => {
  //出入库类型
  if (
    JSON.stringify(dictionary.moreTags) == "{}" ||
    !JSON.stringify(dictionary.moreTags["materialRecordType"])
  ) {
    dictionary.getDictInfo("sys_materialrecord_type").then((res: any) => {
      dictionary.moreTags["materialRecordType"] = getDictData(res);
      dictionary.moreTags["materialRecordTypeOrigin"] = res;
    });
  }
  //出入库用途
  if (
    JSON.stringify(dictionary.moreTags) == "{}" ||
    !JSON.stringify(dictionary.moreTags["purpose"])
  ) {
    dictionary.getDictInfo("sys_materialrecord_purpose").then((res: any) => {
      dictionary.moreTags["purpose"] = getDictData(res);
      dictionary.moreTags["purposeOrigin"] = res;
    });
  }
};
//获取部门类型字典
getMenuStatus();

onMounted(() => {
  //全局事件总线
  const { proxy } = useCurrentInstance();
  //将table的ref给到table类
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(EandORecord);
  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */

  proxy.eventBus.on(
    "onTableButtonClick",
    (data: { name: string; row: TableRow }) => {}
  );
});
// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
provide("dictionary", dictionary);
provide("Location", Location);
</script>
<style lang="scss" scoped></style>
